<template>
	<uv-transition mode="fade" :show="show" :cell-child="cellChild">
		<view class="uv-tags-wrapper">
			<view class="uv-tags"
				:class="[`uv-tags--${shape}`, !plain && `uv-tags--${type}`, plain && `uv-tags--${type}--plain`, `uv-tags--${size}`, `uv-tags--${size}--${closePlace}`, plain && plainFill && `uv-tags--${type}--plain--fill`]"
				@tap.stop="clickHandler" :style="[{
					marginRight: closable && closePlace == 'right-top' ? '10px' : 0,
					marginTop: closable && closePlace == 'right-top' ? '10px' : 0,
				}, style, $uv.addStyle(customStyle)]">
				<slot name="icon">
					<view class="uv-tags__icon" v-if="icon">
						<image v-if="$uv.test.image(icon)" :src="icon" :style="[imgStyle]"></image>
						<uv-icon v-else :color="elIconColor" :name="icon" :size="iconSize"></uv-icon>
					</view>
				</slot>
				<text class="uv-tags__text" :style="[textColor]"
					:class="[`uv-tags__text--${type}`, plain && `uv-tags__text--${type}--plain`, `uv-tags__text--${size}`]">{{
						text }}</text>
				<view class="uv-tags__close" :class="[`uv-tags__close--${size}`, `uv-tags__close--${closePlace}`]"
					v-if="closable && closePlace == 'right'" @tap.stop="closeHandler" :style="{ backgroundColor: closeColor }">
					<uv-icon name="close" :size="closeSize" color="#ffffff"></uv-icon>
				</view>
			</view>
			<view class="uv-tags__close" :class="[`uv-tags__close--${size}`, `uv-tags__close--${closePlace}`]"
				v-if="closable && closePlace == 'right-top'" @tap.stop="closeHandler" :style="{ backgroundColor: closeColor }">
				<uv-icon name="close" :size="closeSize" color="#ffffff"></uv-icon>
			</view>
		</view>
	</uv-transition>
</template>

<script>
import { image } from '@/uni_modules/uv-ui-tools/libs/function/test.js'
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
 * Tag 标签
 * @description tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景
 * @tutorial https://www.uvui.cn/components/tag.html
 * @property {String}			type		标签类型info、primary、success、warning、error （默认 'primary' ）
 * @property {Boolean | String}	disabled	不可用（默认 false ）
 * @property {String}			size		标签的大小，large，medium，mini （默认 'medium' ）
 * @property {String}			shape		tag的形状，circle（两边半圆形）, square（方形，带圆角）（默认 'square' ）
 * @property {String | Number}	text		标签的文字内容 
 * @property {String}			bgColor		背景颜色，默认为空字符串，即不处理
 * @property {String}			color		标签字体颜色，默认为空字符串，即不处理
 * @property {String}			borderColor	镂空形式标签的边框颜色
 * @property {String}			closeColor	关闭按钮图标的颜色（默认 #C6C7CB）
 * @property {String | Number}	name		点击时返回的索引值，用于区分例遍的数组哪个元素被点击了
 * @property {Boolean}			plainFill	镂空时是否填充背景色（默认 false ）
 * @property {Boolean}			plain		是否镂空（默认 false ）
 * @property {Boolean}			closable	是否可关闭，设置为true，文字右边会出现一个关闭图标（默认 false ）
 * @property {Boolean}			show		标签显示与否（默认 true ）
 * @property {String}			icon		内置图标，或绝对路径的图片
 * @event {Function(index)} click 点击标签时触发 index: 传递的index参数值
 * @event {Function(index)} close closable为true时，点击标签关闭按钮触发 index: 传递的index参数值	
 * @example <uv-tags text="标签" type="error" plain plainFill></uv-tags>
 */
export default {
	name: 'uv-tags',
	emits: ['click', 'close'],
	mixins: [mpMixin, mixin, props],
	computed: {
		style() {
			const style = {}
			if (this.bgColor) {
				style.backgroundColor = this.bgColor
			}
			if (this.color) {
				style.color = this.color
			}
			if (this.border && this.borderColor) {
				style.borderColor = this.borderColor
			}
			if (!this.border) {
				style.border = 'none'
			}
			return style
		},
		// nvue下，文本颜色无法继承父元素
		textColor() {
			const style = {}
			if (this.color) {
				style.color = this.color
			}
			return style
		},
		imgStyle() {
			const width = this.size === 'large' ? '17px' : this.size === 'medium' ? '15px' : '13px'
			return {
				width,
				height: width
			}
		},
		// 文本的样式
		closeSize() {
			const size = this.size === 'large' ? 15 : this.size === 'medium' ? 13 : 12
			return size
		},
		// 图标大小
		iconSize() {
			const size = this.size === 'large' ? 21 : this.size === 'medium' ? 19 : 16
			return size
		},
		// 图标颜色
		elIconColor() {
			return this.iconColor ? this.iconColor : this.plain ? this.type : '#ffffff'
		}
	},
	methods: {
		// 点击关闭按钮
		closeHandler() {
			this.$emit('close', this.name)
		},
		// 点击标签
		clickHandler() {
			this.$emit('click', this.name)
		}
	}
}
</script>

<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';

.uv-tags-wrapper {
	position: relative;
}

.uv-tags {
	@include flex;
	align-items: center;
	border-style: solid;

	&--circle {
		border-radius: 100px;
	}

	&--square {
		border-radius: 3px;
	}

	&__icon {
		margin-right: 4px;
	}

	&__text {
		&--mini {
			font-size: 12px;
			line-height: 12px;
		}

		&--medium {
			font-size: 13px;
			line-height: 13px;
		}

		&--large {
			font-size: 15px;
			line-height: 15px;
		}
	}

	&--mini {
		height: 18px;
		line-height: 18px;
		padding: 0 2px;

		&--right {
			padding-right: 2px;
		}
	}

	&--medium {
		height: 26px;
		line-height: 22px;
		padding: 0 10px;

		&--right {
			padding: 0 4px 0 8px;
		}
	}

	&--large {
		height: 32px;
		line-height: 32px;
		padding: 0 15px;

		&--right {
			padding: 0 4px 0 8px;
		}
	}

	&--primary {
		background-color: $uv-primary;
		border-width: 1px;
		border-color: $uv-primary;
	}

	&--primary--plain {
		border-width: 1px;
		border-color: $uv-primary;
	}

	&--primary--plain--fill {
		background-color: #ecf5ff;
	}

	&__text--primary {
		color: #FFFFFF;
	}

	&__text--primary--plain {
		color: $uv-primary;
	}

	&--error {
		background-color: $uv-error;
		border-width: 1px;
		border-color: $uv-error;
	}

	&--error--plain {
		border-width: 1px;
		border-color: $uv-error;
	}

	&--error--plain--fill {
		background-color: #fef0f0;
	}

	&__text--error {
		color: #FFFFFF;
	}

	&__text--error--plain {
		color: $uv-error;
	}

	&--warning {
		background-color: $uv-warning;
		border-width: 1px;
		border-color: $uv-warning;
	}

	&--warning--plain {
		border-width: 1px;
		border-color: $uv-warning;
	}

	&--warning--plain--fill {
		background-color: #fdf6ec;
	}

	&__text--warning {
		color: #FFFFFF;
	}

	&__text--warning--plain {
		color: $uv-warning;
	}

	&--success {
		background-color: $uv-success;
		border-width: 1px;
		border-color: $uv-success;
	}

	&--success--plain {
		border-width: 1px;
		border-color: $uv-success;
	}

	&--success--plain--fill {
		background-color: #f5fff0;
	}

	&__text--success {
		color: #FFFFFF;
	}

	&__text--success--plain {
		color: $uv-success;
	}

	&--info {
		background-color: $uv-info;
		border-width: 1px;
		border-color: $uv-info;
	}

	&--info--plain {
		border-width: 1px;
		border-color: $uv-info;
	}

	&--info--plain--fill {
		background-color: #f4f4f5;
	}

	&__text--info {
		color: #FFFFFF;
	}

	&__text--info--plain {
		color: $uv-info;
	}

	&__close {
		border-radius: 100px;
		background-color: #C6C7CB;
		@include flex(row);
		align-items: center;
		justify-content: center;
		transform: scale(0.6);

		&--right-top {
			position: absolute;
			z-index: 999;
			top: 10px;
			right: 10px;
			/* #ifndef APP-NVUE */
			transform: scale(0.6) translate(80%, -80%);
			/* #endif */
			/* #ifdef APP-NVUE */
			transform: scale(0.6) translate(50%, -50%);
			/* #endif */
		}

		&--mini {
			width: 18px;
			height: 18px;
		}

		&--medium {
			width: 22px;
			height: 22px;
		}

		&--large {
			width: 25px;
			height: 25px;
		}
	}

}
</style>
